<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>用户注册 - 平台账户</title>
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script> 
    
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"  integrity="sha512-pV1z4qGK+D9n5k5ZCAu5jZf5FOMsKDm61VQpZ3gjN8ggruK3qGz2q1qLzXj4g0K0Wc7FvcnzWgSDVO+uQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <style>
        /* 自定义宽度限制 */
        .max-w-750px {
            max-width: 750px;
        }
        
        /* 自定义渐变色 */
        .bg-gradient-blue {
            background: linear-gradient(135deg, #2196F3, #1976D2);
        }
        
        /* 自定义阴影 */
        .shadow-lg-hover:hover {
            box-shadow: 0 10px 15px -3px rgba(33, 150, 243, 0.3);
        }
    </style>
</head>
<body class="bg-gradient-to-r from-blue-50 to-blue-100 min-h-screen">
    <!-- 页面内容保持原结构不变，只修改 class 属性 -->
    <div class="container max-w-750px mx-auto px-4 py-8">
        <!-- Header -->
        <div class="text-center mb-10">
            <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                <i class="fas fa-user-plus text-white text-3xl"></i>
            </div>
            <h1 class="text-2xl font-bold text-blue-900 mb-2">用户注册</h1>
            <p class="text-blue-700">加入平台，开启您的创业之旅</p>
        </div>

        <!-- Progress Bar -->
        <div class="relative mb-12">
            <div class="absolute top-3.5 left-0 right-0 h-1 bg-blue-200"></div>
            <div class="absolute top-3.5 left-0 h-1 bg-blue-500 transition-all duration-500" id="progressLine" style="width: 25%"></div>
            
            <div class="flex justify-between relative">
                <div class="progress-step completed">
                    <div class="w-7 h-7 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-2">
                        <i class="fas fa-check text-white text-xs"></i>
                    </div>
                    <div class="text-xs text-blue-700">手机验证</div>
                </div>
                <div class="progress-step active">
                    <div class="w-7 h-7 bg-white border-2 border-blue-500 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span class="text-blue-500 font-medium">2</span>
                    </div>
                    <div class="text-xs text-blue-700 font-medium">完善资料</div>
                </div>
                <div class="progress-step">
                    <div class="w-7 h-7 bg-white border-2 border-blue-200 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span class="text-blue-400">3</span>
                    </div>
                    <div class="text-xs text-blue-400">会员选择</div>
                </div>
                <div class="progress-step">
                    <div class="w-7 h-7 bg-white border-2 border-blue-200 rounded-full flex items-center justify-center mx-auto mb-2">
                        <span class="text-blue-400">4</span>
                    </div>
                    <div class="text-xs text-blue-400">实名认证</div>
                </div>
            </div>
        </div>

        <!-- Form Steps -->
        <div class="bg-white rounded-xl shadow-lg mb-8 overflow-hidden">
            <!-- Step Indicator -->
            <div class="h-1 bg-gradient-blue"></div>
            
            <!-- Step Content -->
            <div class="p-6">
                <!-- Step 2: 完善资料 -->
                <h2 class="text-lg font-semibold text-blue-900 mb-6 flex items-center">
                    <i class="fas fa-user-edit text-blue-500 mr-2"></i>
                    完善个人资料
                </h2>

                <div class="space-y-6">
                    <!-- 姓名 -->
                    <div>
                        <label class="block text-sm font-medium text-blue-800 mb-2">真实姓名 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <i class="fas fa-user text-blue-400 absolute left-3 top-3.5"></i>
                            <input type="text" class="w-full pl-10 pr-4 py-2 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition">
                        </div>
                    </div>

                    <!-- 登录密码 -->
                    <div>
                        <label class="block text-sm font-medium text-blue-800 mb-2">设置登录密码 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <i class="fas fa-lock text-blue-400 absolute left-3 top-3.5"></i>
                            <input type="password" class="w-full pl-10 pr-4 py-2 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition" placeholder="设置6-20位登录密码">
                        </div>
                    </div>

                    <!-- 交易密码 -->
                    <div>
                        <label class="block text-sm font-medium text-blue-800 mb-2">设置交易密码 <span class="text-red-500">*</span></label>
                        <div class="relative">
                            <i class="fas fa-key text-blue-400 absolute left-3 top-3.5"></i>
                            <input type="password" class="w-full pl-10 pr-4 py-2 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition" placeholder="设置6位数字交易密码">
                        </div>
                        <p class="text-xs text-blue-500 mt-1">交易密码用于资金操作，请勿与登录密码相同</p>
                    </div>

                    <!-- 邀请码 -->
                    <div>
                        <label class="block text-sm font-medium text-blue-800 mb-2">邀请码 (选填)</label>
                        <div class="relative">
                            <i class="fas fa-user-friends text-blue-400 absolute left-3 top-3.5"></i>
                            <input type="text" class="w-full pl-10 pr-4 py-2 border border-blue-200 rounded-lg focus:ring-2 focus:ring-blue-300 focus:border-blue-500 transition" placeholder="请输入邀请人邀请码">
                        </div>
                    </div>

                    <!-- Info Box -->
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
                        <p class="text-blue-800 font-medium mb-2"><i class="fas fa-exclamation-circle text-red-500 mr-1"></i> 重要提示：</p>
                        <p class="text-sm text-blue-700 mb-2">除浏览外，其他功能必须实名认证后方能参与，包括提现平台账户款项。</p>
                        <p class="text-sm text-blue-700">个人平台提现限制：<strong class="text-blue-900">2万元/天</strong></p>
                        <p class="text-sm text-blue-700">平台商家提现限制：<strong class="text-blue-900">15万元/天</strong></p>
                    </div>

                    <!-- Buttons -->
                    <div class="pt-4 space-y-3">
                        <button class="w-full py-3 bg-gradient-blue text-white font-medium rounded-lg shadow-md hover:shadow-lg transition shadow-lg-hover">
                            下一步
                        </button>
                        <button class="w-full py-3 border border-blue-500 text-blue-600 font-medium rounded-lg hover:bg-blue-50 transition">
                            上一步
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="text-center text-blue-600 text-sm">
            <p>© 2023 创业服务平台 | <a href="#" class="hover:text-blue-800">用户协议</a> | <a href="#" class="hover:text-blue-800">隐私政策</a></p>
            <p class="mt-2">客服电话：400-888-8888 | 工作日 9:00-18:00</p>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 简化版脚本示例
        document.addEventListener('DOMContentLoaded', function() {
            console.log('页面加载完成，Tailwind CSS 已生效');
            // 这里可以添加更多交互逻辑
        });
    </script>
</body>
</html>